<template>
  <view-box ref="viewBox" body-padding-top="46px">

    <x-header style="width:100%;position:absolute;left:0;top:0;" class="head-gree">
      <span>{{title}}</span>
    </x-header>

    <router-view class="router-view"></router-view>

    <tabbar v-show="hidshow">
      <tabbar-item :selected="tabbarSelected===1" link="/home" >
        <x-icon slot="icon" type="ios-home" size="27"></x-icon>
        <span slot="label">首页</span>
      </tabbar-item>
      <tabbar-item :selected="tabbarSelected===2" link="/shopIndex">
        <x-icon slot="icon" type="android-playstore" size="27"></x-icon>
        <span slot="label">商城</span>
      </tabbar-item>
      <tabbar-item :selected="tabbarSelected===3" link="/shopCar" :badge="shopNum">
        <x-icon slot="icon" type="ios-cart" size="27"></x-icon>
        <span slot="label">购物车</span>
      </tabbar-item>
      <tabbar-item :selected="tabbarSelected===4" link="/user">
        <x-icon slot="icon" type="ios-contact-outline" size="27"></x-icon>
        <span slot="label">我的</span>
      </tabbar-item>
    </tabbar>

  </view-box>
</template>

<script>
  import {ViewBox, XHeader,Tabbar, TabbarItem } from 'vux'
    export default {
      name: "layout",
      components: {
        ViewBox,
        XHeader,
        Tabbar,
        TabbarItem,
      },
      computed: {
        title () {  //页面标题
          return this.$route.meta.title
        },
      },
      data () {
        return {
          tabbarSelected:1,
          docmHeight: '0',  //默认屏幕高度
          showHeight:  '0',  //实时屏幕高度
          hidshow:true,  //显示或者隐藏tabbar,
          shopNum:'',
        }
      },
      watch :{
        $route(to,from){
          this.reload();
          /*console.log(to.path);
          console.log('历史记录长度：'+history.length);
          console.log(history);*/
        },
        showHeight() {  //watch监控比较，判断底部菜单是否该显示出来
          if(this.docmHeight > this.showHeight){
            this.hidshow=false
          }else{
            this.hidshow=true
          }
          this.isHid();
        },
        '$store.state.appdata.shopCarNum'(nd,od){
          this.shopCarNum(nd);
        }
      },
      created(){
        this.reload();
      },
      mounted() {
        //默认屏幕高度
        this.docmHeight= document.documentElement.clientHeight;

        // window.onresize监听页面高度的变化
        window.onresize = ()=>{

          return(()=>{
            //实时屏幕高度
            this.showHeight = document.body.clientHeight;
          })()

        }

      },
      methods: {
        reload(){
          this.isHid();
          let nd = this.$store.state.appdata.shopCarNum;
          this.shopCarNum(nd);
        },
        shopCarNum(nd){
          if(nd.length == 0){
            this.shopNum = null;
          }else{
            this.shopNum = nd.length.toString();
          }
        },
        isHid(){
          let url = this.$route.path;
          this.hidshow=true;
          let n = 1;
          if(url.indexOf("/home")!= -1){
            n = 1
          }else if(url.indexOf("/shopIndex")!= -1){
            n = 2;
          }else if(url.indexOf("/shopCar")!= -1){
            n = 3;
          }else if(url.indexOf("/user")!= -1){
            n = 4;
          }else {
            this.hidshow=false;
          }
          this.tabbarSelected = n;
        }
      }
    }
</script>

<style lang="less">
  @import '~vux/src/styles/reset.less';
  @import "../styles/anstyle";
  .weui-tabbar__item{
    .weui-tabbar__icon{
      svg{
        fill: @color-text3;
      }
    }
    &.weui-bar__item_on{
      .weui-tabbar__icon{
        svg{
          fill: @color-Success;
        }
      }
      .weui-tabbar__label{
        //color:@color-Blue !important;
      }
    }
  }

</style>
